<template>
	<view class="container">
		<view class="hisCont">
			<view class="hisContTwo">
				<view class="histitle">
					<text>学习记录</text>
					<view v-if="recordObj" class="titlecont" @tap="goPage('/pages/onlineschool/studyhistory/index')">
						<text>查看全部</text><image src="../../../static/image/onlineschool/rightarrow.png"></image>
					</view>
				</view>
				<view v-if="recordObj"  @tap="goVideoplay(recordObj.nodeId,recordObj.newsId)">
					<view class="imgCont"><image :src="recordObj.cover"></image></view>
					<view class="classdetailCont">
						<text class="classtitle">{{recordObj.courseName}}</text>
						<view class="studyprocess">已学{{`${(recordObj.learningProgress * 100).toFixed(2)}%` || ''}}</view>
						<view class="studydetail">
							<image src="../../../static/image/onlineschool/playicon.png"></image>
							<text>上次学到:课时{{recordObj.currentEpisodeNumber}} {{recordObj.currentEpisodeName}}</text>
						</view>
					</view>
				</view>
				<view v-else class="no__content">暂无学习记录</view>
			</view>
		</view>
		<view class="schoolCont">
			<text>网校矩阵</text>
			<view class="schoollist" v-if="schoolList">
				<view v-for="(item,index) in schoolList" :key="item.id" @tap="goPage('/pages/onlineschool/schoolList/index',{id:item.playUrl})">
					<img-item :src="item.hPic"></img-item>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-h" scroll-x="true" :show-scrollbar="false"  :scroll-left="scrollLeft">
		<view class="flexTop" >
			<view v-for="(item,index) in courseTabList" :key="item.id" class="flexSingle" :class="tabIndex === index ? 'tapactive' : ''" :id="'nav'+tab.dataId" :data-current="index" @tap="ontabtap">
				<view class="flexCont">
					<text>{{item.title}}</text>
					<view class="typedetail">
						<view>{{item.describe}}</view>
						<image v-if="tabIndex === index" src="../../../static/image/school/typeSel.png"></image>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
		<view class="courseData">
		<swiper :current="tabIndex" class="classlist" :class="{'topfixed': scrollFlag}" :duration="300" @change="ontabchange">
		    <swiper-item class="swiper-item" v-for="(tab,k) in newsList" :key="k">
				<scroll-view class="scroll-v " enableBackToTop="true" scroll-y @scrolltolower="loadMore(k)">
					<view v-for="(item,index) in tab.data" :key="item.newsId" class="classlistcont" @tap="goVideoplay(item.nodeId,item.newsId)">
						<view class="imgCont">
							<img-item :src="item.pPic"></img-item>
						</view>
						<view class="classdetailCont">
							<text class="classtitle">{{item.title}}</text>
							<view class="classdetail">{{item.newsAbstract}}</view>
							<text class="classfee">免费学习</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		</view>
	</view>
</template>

<script>
	// 缓存每页最多
	const MAX_CACHE_DATA = 100;
	// 缓存页签数量
	const MAX_CACHE_PAGE = 3;
	import { mapActions,mapState } from 'vuex'
	import { request } from "@/http/request"
	import { newsServlet,latestRecord,recommendServlet } from "@/http/api.js"
	export default {
		computed: {
			...mapState(['scene','isRedirectUrl'])
		},
		data() {
			return {
				newsList: [],
				cacheTab: [],
				tabIndex: 0,
				nodeId: 168,
				recordObj: null,
				schoolList: null,
				courseTabList: null,
				scrollFlag:false,
				scrollLeft:0,
				navwidth:0,
				navitemwidth:0,
				pageSize: 10,
				stickyTop:uni.upx2px(750)
			}
		},
		onPageScroll(e) {
			this.scrollFlag = e.scrollTop >= this.stickyTop ? true : false
		},	
		onLoad(){
			this.getNavlist()
		},
		onShow(){
			if(this.scene == 1037 && this.isRedirectUrl){
				this.platformAuth().then(this.getUserStatus).then(this.getLatestRecord)
			}else{
				// this.getUserOpenId()
				// .then(this.platformAuth)
				// .then(this.getUserStatus).then(this.getLatestRecord)
				this.getLatestRecord()
			}
		},
		methods: {
			...mapActions(['getUserOpenId','platformAuth','getUserStatus']),
			gotoPosition(dis) {
				let _dis = dis - this.navwidth/2 + this.navitemwidth/2
				this.scrollLeft = _dis
			},
			// 导航分类
			getNavlist(){
				let _data = {
					url: recommendServlet,
					data: {
						"functionName":"getRecommond",
						"modeId":328,
						"pageSize": 10,
						"page": 1
					}
				};
				request(_data).then((res) => {
					this.schoolList = res.data[1].manualList
					this.courseTabList = res.data[2].manualList
					if(!this.courseTabList) return
					this.courseTabList.forEach((tabBar) => {
					    this.newsList.push({
					        data: [],
							nodeId:tabBar.playUrl,
					        isLoading: false,
							nums:0,
							page:1,
					        refreshText: "",
					        loadingText: '加载更多...'
					    });
					});
					this.getCourseList(0)
				})
			},
			// 课程列表
			getCourseList(i){
				this.tabIndex = i;
				const _data = {
					url: newsServlet,
					data: {
						functionName: 'getCurrentNodeNews',
						nodeId: this.newsList[i].nodeId,
						page: this.newsList[i].page,
						pageSize: this.pageSize
					}
				};
				request(_data).then( res => {
					let activeTab = this.newsList[this.tabIndex];
					activeTab.nums = res.totalRecord;
					activeTab.data = activeTab.data.concat(res.data);

					const query = uni.createSelectorQuery().in(this)
					query.select('.flexTop').boundingClientRect(data => {
					  this.navwidth = data.width
					}).exec();
					
					const itemquery = uni.createSelectorQuery().in(this);
					itemquery.select('.flexSingle').boundingClientRect(data => {
					  this.navitemwidth = data.width
					}).exec()
					
				})
			},
			getLatestRecord(){   // 学习记录
				this.$request({
					url: latestRecord
				}).then( res => {
					this.recordObj = res
				})
			},
			loadMore(e) {
				let _obj = this.newsList[e];
				if(_obj.page*this.pageSize<_obj.nums){
					_obj.page++;
					this.getCourseList(e);
				}
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
			    this.switchTab(index);
			},
			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				if(this.tabIndex==index){
					return;
				}
			    this.switchTab(index);
			},
			switchTab(index) {
				if (this.newsList[index].data.length === 0) {
			        this.getCourseList(index);
			    }
				this.gotoPosition(this.navitemwidth*index);
			    if (this.tabIndex === index) {
			        return;
			    }
			
			    // 缓存 tabId
			    if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
			        let isExist = this.cacheTab.indexOf(this.tabIndex);
			        if (isExist < 0) {
			            this.cacheTab.push(this.tabIndex);
			            //console.log("cache index:: " + this.tabIndex);
			        }
			    }
			
			    this.tabIndex = index;
			    
			    // 释放 tabId
			    if (this.cacheTab.length > MAX_CACHE_PAGE) {
			        let cacheIndex = this.cacheTab[0];
			        this.clearTabData(cacheIndex);
			        this.cacheTab.splice(0, 1);
			        //console.log("remove cache index:: " + cacheIndex);
			    }
			},
			clearTabData(e) {
			    this.newsList[e].data.length = 0;
			    this.newsList[e].loadingText = "加载更多...";
			},
			goVideoplay(nodeId,newsId){
				console.log('goVideoplay11------');
				this.toAutorize();
				const authStatus = this.$store.state.authStatus;
				console.log(authStatus);
				if(authStatus !== 'UNAUTHORIZED'){
					console.log('videoplay--goPage------');
					this.goPage('../videoplay/index',{nodeId: nodeId,newsId: newsId})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
